<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carousel Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #222;
      margin: 0;
    }

    .carousel-container {
      position: relative;
      width: 80%;
      max-width: 1200px;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
    }

    .featured-title {
      width: 100%;
      padding: 10px;
      background-color: #444;
      color: #fff;
      text-align: left;
      font-size: 18px;
      font-weight: bold;
    }

    .carousel-content {
      display: flex;
      width: 100%;
      position: relative;
    }

    .main-image {
      width: 66.67%;
      position: relative;
    }

    .main-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0 0 0 10px;
    }

    .product-info {
      padding: 20px;
      width: 33.33%;
      background-color: #f8f8f8;
      border-radius: 0 0 10px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .product-info h2 {
      margin: 0 0 20px;
      font-size: 24px;
    }

    .product-thumbnails {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .product-thumbnails div {
      flex: 1 1 calc(50% - 10px);
      height: 100px;
      background-color: #ccc;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .product-thumbnails img {
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
      border-radius: 5px;
    }

    .nav-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: pink;
      border: none;
      color: white;
      font-size: 18px;
      padding: 10px;
      cursor: pointer;
      border-radius: 20px;
      width: 40px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background-color 0.3s;
    }

    .nav-button.left {
      left: 10px;
    }

    .nav-button.right {
      right: 10px;
    }

    .nav-button:before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      border-top: 2px solid purple;
      border-right: 2px solid purple;
    }

    .nav-button.left:before {
      transform: rotate(-135deg);
    }

    .nav-button.right:before {
      transform: rotate(45deg);
    }

    .nav-button:hover {
      background-color: rgba(255, 192, 203, 0.5);
    }
  </style>
</head>
<body>

<div class="carousel-container">
  <div class="featured-title">FEATURED & RECOMMENDED</div>
  <button class="nav-button left"></button>
  <div class="carousel-content">
    <div class="main-image">
      <img src="main-product1.jpg" alt="Character.Ai">
    </div>
    <button class="nav-button left"></button>
    <div class="product-info">
      <h2>Character.Ai</h2>
      <div class="product-thumbnails">
        <div><img src="1-1.jpg" alt=""></div>
        <div><img src="1-2.jpg" alt=""></div>
        <div><img src="1-3.jpg" alt=""></div>
        <div><img src="1-4.jpg" alt=""></div>
      </div>
    </div>
  </div>
  <button class="nav-button right"></button>
</div>
<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    console.log('Document is ready');

    const thumbnails = document.querySelectorAll('.product-thumbnails div');
    const mainImage = document.querySelector('.main-image img');
    const productName = document.querySelector('.product-info h2');
    const productThumbnails = [
      ["main-product1.jpg", "Character.Ai", ["1-1.jpg", "1-2.jpg", "1-3.jpg", "1-4.jpg"]],
      ["ChatGPT-product.jpg", "Another Product", ["ChatGPT1.png", "ChatGPT2.png", "ChatGPT3.png", "ChatGPT4.png"]],
      // Add more products here
    ];
    let currentIndex = 0;

    const updateProductInfo = (index) => {
      const [mainImgSrc, name, thumbnails] = productThumbnails[index];
      mainImage.src = mainImgSrc;
      productName.textContent = name;
      thumbnails.forEach((src, i) => {
        document.querySelectorAll('.product-thumbnails img')[i].src = src;
      });
    };

    document.querySelector('.nav-button.left').addEventListener('click', () => {
      currentIndex = (currentIndex - 1 + productThumbnails.length) % productThumbnails.length;
      updateProductInfo(currentIndex);
    });

    document.querySelector('.nav-button.right').addEventListener('click', () => {
      currentIndex = (currentIndex + 1) % productThumbnails.length;
      updateProductInfo(currentIndex);
    });

    updateProductInfo(currentIndex); // Initial update
  });
</script>
</body>
</html>
